import React, {PureComponent} from 'react'
import Tabs from '../Tabs'
import '../../css/temper.scss'
import '../Tabs/tab.scss'
import '../../css/tab.scss'
import TemperImg from '../component/temper/temper-img'
import {getTemper} from '../action/map.action'
import {connect} from 'react-redux'
const Tab = Tabs.Tab;
class Temper extends PureComponent {

    componentDidMount() {
        const {dispatch} = this.props
        dispatch(getTemper({}))

    }

    shouldComponentUpdate(nextProps) {
        return nextProps.temperData !== this.props.temperData
    }

    getWidth = (x, y) => {
        return Math.floor(100 * y / (x + y)) + '%'
    }

    /*匹配温湿度数据*/
    getTemperData = (title) => {
        const temperData =  this.props.temperData.toJS()
        if (!temperData.length) {
            return []
        }
        return temperData.filter(t => t.location === title).map(t => {
            return {
                pos: [t.sensorLocationX, t.sensorLocationY],
                sensorId: t.sensorId,
                humidity: t.humidity,
                temperature: t.temperature
            }
        })
    }

    render() {
        const config = [
            {
                name: 'H3C',
                key: 'h3c',
                data: [
                    {
                        width: this.getWidth(680, 1036),
                        // width: '50%',
                        title: 'h3c试制中心',
                        src: '../images/business/h3c-che.png',
                        size: [1552, 680],
                        device: this.getTemperData('h3c试制中心')
                    },
                    {
                        width: this.getWidth(1036, 680),
                        // width: '50%',
                        title: 'h3c海创园一楼库房',
                        src: '../images/business/h3c-ku.png',
                        size: [1263, 1036],
                        device: this.getTemperData('h3c海创园一楼库房')
                    }
                ]
            },
            {
                name: '东信',
                key: 'dongxin',
                data: [
                    {
                        width: this.getWidth(1088, 1029),
                        title: '东信3楼',
                        src: '../images/business/dong-3.png',
                        size: [2115, 1088],
                        device: this.getTemperData('东信3楼')
                    },
                    {
                        width: this.getWidth(1029, 1088),
                        title: '东信4楼',
                        src: '../images/business/dong-4.png',
                        size: [1615, 1029],
                        device: this.getTemperData('东信4楼')
                    }
                ]
            },
            {
                name: '信华',
                key: 'xinhua',
                data: [
                    {
                        width: this.getWidth(1129, 1165),
                        title: '信华2楼',
                        src: '../images/business/xin-2.png',
                        size: [1429, 1129],
                        device: this.getTemperData('信华2楼')

                    },
                    {
                        width: this.getWidth(1165, 1129),
                        title: '信华3楼',
                        src: '../images/business/xin-3.png',
                        size: [1236, 1165],
                        device: this.getTemperData('信华3楼')

                    }
                ]
            },
            {
                name: '达创',
                key: 'dachuang',
                data: [
                    {
                        width: this.getWidth(1240, 1178),
                        title: '达创2楼',
                        src: '../images/business/dachuang-2.png',
                        size: [1218, 1240],
                        device: this.getTemperData('达创2楼')

                    }, {
                        width: this.getWidth(1178, 1240),
                        title: '达创SMT',
                        src: '../images/business/dachuang-smt.png',
                        size: [2439, 1178],
                        device: this.getTemperData('达创SMT')

                    }
                ]
            },
            {
                name: '统合',
                key: 'tonghe',
                data: [
                    {
                        width: '100%',
                        title: '统合1楼',
                        src: '../images/business/tonghe1f.png',
                        size: [1491, 516],
                        device: this.getTemperData('统合1楼')

                    }
                ]
            },
            {
                name: '双赢',
                key: 'shuangying',
                data: [
                    {
                        width: '100%',
                        title: '双赢1楼',
                        src: '../images/business/shuangying1F.png',
                        size: [2270, 901],
                        device: this.getTemperData('双赢1楼')

                    }
                ]
            },
            {
                name: '飞旭',
                key: 'shuangying',
                data: [
                    {
                        width: '100%',
                        title: '飞旭1楼',
                        src: '../images/business/feixu.png',
                        size: [2028, 977],
                        device: this.getTemperData('飞旭1楼')

                    }
                ]
            }
        ]
        return (
            <div className="full-container">
                <Tabs defaultActiveKey="1" className='custom-tab'>
                    {config.map((c, i) => {
                        return <Tab tab={c.name} key={`temper-img-${c.key}-${i}`}>
                            {c.data.map((d, index) => {
                                return <div key={`temper-img-${c.key}-${i}-${index}`}
                                            className="temper-img-container" style={{width: d.width}}>
                                    <p>{d.title}</p>
                                    <TemperImg {...d}/>
                                </div>
                            })}
                        </Tab>
                    })}
                </Tabs>
            </div>
        )
    }

}

function mapStateToProps({temperData}) {
    return {temperData}
}

export default connect(mapStateToProps)(Temper)